import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react'
import IMTable from '../../../components/IMTable';
import { Button, message, Modal } from 'antd';
import usePagination from '../../../hooks/usePagination';
import { Link } from 'react-router-dom';
import "./TableList.scss"
import useRequest from '../../../hooks/useRequest';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { AlbumType } from '../../../constant';
const { confirm } = Modal
interface Request {
    getClassifyList: (params: any) => Promise<any>;
    delClassify: (params: any) => Promise<any>
}
const columns = ({ handleDel, handleConfig }: {
    handleDel: (id: number) => void;
    handleConfig: (values: any) => void
}) => [
        {
            title: '分类ID',
            dataIndex: 'id',
            key: 'id',
            fixed: 'left' as any,
            width: 100
        },
        {
            title: '分类名称',
            dataIndex: 'classify_name',
            key: 'classify_name',
            width: 200,
            align: 'left' as any,
            render: (text: string, record: any) => <Button type="link" className="im_pic_classify_btn">
                <Link to={`/pic/classify/classify_album/${record.id}/${AlbumType.BY_CLASSIFY}/${text}`}>{text}</Link>
            </Button>
        },
        {
            title: '操作',
            dataIndex: 'control',
            key: 'control',
            fixed: 'right' as any,
            width: 120,
            render: (text: any, record: any) => <div>
                <Button type="primary" style={{ marginRight: '10px' }} size="small"
                    className="safety_btn" onClick={() => handleConfig(record)}>配置</Button>
                <Button type="primary" className="danger_btn" size="small"
                    onClick={() => handleDel(record.id)}>刪除</Button>
            </div>
        },
    ]
interface IProps {
    handleConfig: (values: any) => void
}
const TableList = (props: IProps, ref: any) => {
    const { handleConfig } = props
    const request = useRequest<Request>({
        modulePath: "picClassify",
    });
    const getList = async (params?: any) => {
        console.log(params)
        return request.getClassifyList(params);

    };
    const formatData = async ({ data: { total, list } }: any) => {
        return {
            total,
            data: list
        }
    }
    const { pagination: { page, limit, total, onChange }, getData, loading, dataSource }: any = usePagination({
        apiRun: getList, formatData,
        sizeLabel: 'limit', currentLabel: 'page',
    })
    useImperativeHandle(ref, () => ({
        getList: getData
    }))
    // 删除
    const handleDel = (id: number) => {
        confirm({
            title: '提示',
            icon: <ExclamationCircleOutlined />,
            content: '确定要删除该分类吗？',
            async onOk() {
                const res = await request.delClassify(id)
                if (res) {
                    message.success('删除成功')
                    getData()
                }
            }
        });
    }
    return <IMTable columns={columns({ handleDel, handleConfig })}
        pagination={{ current: page, pageSize: limit, total: total, onChange }}
        scroll={{ y: 'calc(100vh - 300px)' }}
        loading={loading}
        dataSource={dataSource}
        rowKey={record => record.id}></IMTable>
}

export default forwardRef(TableList) 